import React, { useState, useEffect } from 'react'
import reactDom from 'react-dom'
import Com from './Com'

function render() {
    reactDom.render(<About/>, document.getElementById('root'))
}

let nums = 6666

function userMyState(initState) {
    let fn = (num) => {
        nums = num
        render()
    }

    return [nums, fn]
}




function About() {
    let [count, setCount] = userMyState(nums)
    console.log('render', count)
    return (
        <div>
            <p>
                About -- { count }
            </p>
            <p>
                About -- 
            </p>
            <button onClick={() => {
                setCount(9999)
            }}>
                点我修改
            </button>
        </div>
    )
}

// function About() {
//     const [count, setCount] = useState(888)
//     const [flag, setFlag] = useState(true)
//     const [obj, setObj] = useState({
//         name: "张三",
//         age: 18
//     })
//     // useEffect(callback, 监听)
//     useEffect(() => {
//         // 实例期
//         console.log('我是修改count的逻辑')

//         // 销毁器
//         return () => {
//             console.log('我被销毁了~~')
//         }

//     }, [count])
//     // useEffect(() => {
//     //     // 实例期
//     //     // console.log('我是useEffect')

//     //     console.log('我是修改张三的逻辑')
//     // }, [obj])
//     return (
//         <div>
//             About -- { obj.name }
//             <p>
//             About -- { obj.age }
//             </p>
//             {/* <div>
//                 <button onClick={() => {
//                     const obj2 = { ...obj }
//                     obj2.name = "李四"
//                     setObj(obj2)
//                 }}>修改</button>
//             </div>

//             <div>
//                 { count }
//                 <button onClick={() => {
//                     setCount(count + 1)
//                 }}>修改2</button>
//             </div> */}

//             {
//                 flag? <Com/>: ""
//             }

//             <button onClick={() => {
//                 setFlag(false)
//             }}>点我销毁</button>
            
//         </div>
//     )
// }

export default About
